<template>
  <view class="page-content">
    <!-- 选择器背景 -->
    <view class="page-mask"></view>
    <!-- 选择器主体 -->
    <view class="page-main" :style="'height:60%'">
      <!-- 操作区域 包含取消和确定 -->
      <view class="main-operate">
        <text class="title-txt" @click.stop="handleCancel">取消</text>
        <text class="title-txt" @click.stop="handleSubmit">确定</text>
      </view>
      <!-- 已选择的地址信息 -->
      <view
        class="main-select"
        :class="[selectAreaLevelLimit == 3 ? 'w33_percent' : '']"
      >
        <text
          v-if="showIndex == 0 || provinceObj.name"
          :class="showIndex == 0 ? 'select' : ''"
          @click="anewSelect(0)"
          >{{ provinceObj.name || '请选择' }}</text
        >
        <text
          v-if="showIndex == 1 || cityObj.name"
          :class="showIndex == 1 ? 'select' : ''"
          @click="anewSelect(1)"
          >{{ cityObj.name || '请选择' }}</text
        >
        <text
          v-if="showIndex == 2 || areaObj.name"
          :class="showIndex == 2 ? 'select' : ''"
          @click="anewSelect(2)"
          >{{ areaObj.name || '请选择' }}</text
        >
        <text
          v-if="(showIndex == 3 || streetObj.name) && selectAreaLevelLimit == 4"
          :class="showIndex == 3 ? 'select' : ''"
          @click="anewSelect(3)"
          >{{ streetObj.name || '请选择' }}</text
        >
      </view>
      <!-- 待选择的地址信息 -->
      <view class="main-list">
        <view v-if="showIndex == 0">
          <view
            class="list-box"
            :class="provinceObj.id == item.id ? 'active' : ''"
            @click="handleSelectAddress(0, item)"
            v-for="item in provinceData"
            :key="item.id"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-if="showIndex == 1">
          <view
            class="list-box"
            :class="cityObj.id == item.id ? 'active' : ''"
            @click="handleSelectAddress(1, item)"
            v-for="item in cityData"
            :key="item.id"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-if="showIndex == 2">
          <view
            class="list-box"
            :class="areaObj.id == item.id ? 'active' : ''"
            @click="handleSelectAddress(2, item)"
            v-for="item in areaData"
            :key="item.id"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-if="showIndex == 3 && selectAreaLevelLimit == 4">
          <view
            class="list-box"
            :class="streetObj.id == item.id ? 'active' : ''"
            @click="handleSelectAddress(3, item)"
            v-for="item in streetsData"
            :key="item.id"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAreaList } from '../../services/user';

export default {
  name: 'UniAddressSelector',
  props: {
    areaInfoSelected: {
      type: Object,
      default: {},
    },
    selectAreaLevelLimit: {
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      showIndex: 0, //地区显示
      provinceObj: {},
      cityObj: {},
      areaObj: {},
      streetObj: {},
      heightCot: 30, //设置屏幕高度 0 ~ 100
      provinceData: '', // 当前展示的省数据
      cityData: [], // 当前展示的市数据
      areaData: [], //当前展示的区数据
      streetsData: [], //当前展示的区数据
    };
  },
  mounted() {
    if (this.areaInfoSelected.fullAreaTextInitial) {
      let { fullAreaTextInitial } = this.areaInfoSelected;
      let _arr = fullAreaTextInitial.split(',');

      this.provinceObj = this.areaInfoSelected.provinceObj;
      this.cityObj = this.areaInfoSelected.cityObj;
      this.areaObj = this.areaInfoSelected.areaObj;
      this.streetObj = this.areaInfoSelected.streetObj;

      if (_arr.length == 1) {
        this.handleGetMap({}, 'init', '');
      }
      if (_arr.length == 2) {
        this.handleGetMap(this.areaInfoSelected.provinceObj, 'pro', '');
      }
      if (_arr.length == 3) {
        this.handleGetMap(
          this.areaInfoSelected.cityObj,
          'city',
          this.areaInfoSelected.cityObj.id
        );
      }
      if (_arr.length == 4) {
        this.handleGetMap(
          this.areaInfoSelected.areaObj,
          'area',
          this.areaInfoSelected.areaObj.id
        );
      }
      console.log('传入的this.areaInfoSelected', this.areaInfoSelected);
    } else {
      this.handleGetMap({}, 'init', '');
    }
    this.getScreen();
  },
  methods: {
    //组件高度自适应
    getScreen() {
      let that = this;
      uni.getSystemInfo({
        success: (res) => {
          that.heightCot = (res.safeArea.height * 2) / 2;
        },
      });
    },
    //取消
    handleCancel() {
      this.$emit('cancel');
    },
    //确定
    handleSubmit() {
      const { provinceObj, cityObj, areaObj, streetObj } = this;
      const arr = [provinceObj, cityObj, areaObj, streetObj];

      let _fullAreaText = [];
      arr.map((item) => {
        if (item.id) {
          _fullAreaText.push(item.areaName);
        }
      });
      if (this.selectAreaLevelLimit == 3) {
        if (_fullAreaText.length !== 3) {
          uni.showToast({
            icon: 'none',
            title: '地址需精确到地区',
          });
          return;
        }
      } else {
        if (_fullAreaText.length !== this.selectAreaLevelLimit) {
          uni.showToast({
            icon: 'none',
            title: '地址需精确到街道',
          });
          return;
        }
      }
      let areaInfoObj = {
        fullAreaTextInitial: _fullAreaText.toString(),
        fullAreaText: _fullAreaText.toString().replace(/,/g, ''),
        provinceCode: provinceObj.id || '',
        cityCode: cityObj.id || '',
        id: areaObj.id || '',
        streetCode: streetObj.id || '',
        provinceObj,
        cityObj,
        areaObj,
        streetObj,
      };
      this.$emit('confirm', areaInfoObj);
    },
    //下拉选择
    anewSelect(num) {
      switch (num) {
        case 0:
          this.showIndex = 0;
          this.cityObj = {};
          this.areaObj = {};
          this.streetObj = {};

          this.cityData = [];
          this.areaData = [];
          this.streetsData = [];
          this.handleGetMap({}, 'init', '');
          break;
        case 1:
          this.showIndex = 1;
          this.streetObj = {};
          this.areaData = [];
          this.streetsData = [];
          if (!this.areaObj.id) return;
          this.areaObj = {};
          this.handleGetMap(this.provinceObj, 'pro', this.provinceObj.id);
          break;
        case 2:
          this.showIndex = 2;
          this.streetsData = [];
          if (!this.streetObj.id) return;
          this.streetObj = {};
          this.handleGetMap(this.areaObj, 'area', this.areaObj.id);
          break;
        case 3:
          break;
      }
    },
    async handleGetMap(obj, type, pid) {
      //name选择名称 type类型
      let that = this,
        datas = {
          parentArea: 0,
        };

      if (type !== 'init') {
        datas.parentArea = obj.id;
        uni.showLoading({
          title: '加载中',
          mask: true,
        });
      }
      const { code, data } = await getAreaList({ pid });
      if (code != 200) return;
      uni.hideLoading();

      let arr = ['init', 'pro', 'city', 'area'];
      let _obj = {
        init: 'provinceData',
        pro: 'cityData',
        city: 'areaData',
        area: 'streetsData',
      };
      this[_obj[type]] = data;
      this.showIndex = arr.indexOf(type);
    },
    handleSelectAddress(type, obj) {
      switch (type) {
        case 0:
          //选择省
          this.handleGetMap(obj, 'pro', obj.id);
          this.provinceObj = obj;
          this.showIndex = 1;
          this.cityData = [];
          this.areaData = [];
          this.streetsData = [];
          break;
        case 1:
          //选择市
          this.handleGetMap(obj, 'city', obj.id);
          this.cityObj = obj;
          this.showIndex = 2;
          this.areaData = [];
          this.streetsData = [];
          break;
        case 2:
          //选择区
          if (this.selectAreaLevelLimit == 3) {
            this.areaObj = obj;
          } else {
            this.handleGetMap(obj, 'area', obj.id);
            this.areaObj = obj;
            this.showIndex = 3;
            this.streetsData = [];
          }
          break;
        case 3:
          //选择街道
          this.streetObj = obj;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-mask {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 998;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.page-main {
  height: 100vh;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.2);
  border-radius: 16rpx 16rpx 0 0;
  max-height: 60%;
  .main-operate {
    padding: 0 10rpx 10rpx 10rpx;
    display: flex;
    justify-content: space-between;
    .title-txt {
      color: #343434;
      font-size: 30rpx;
      &:nth-child(2) {
        color: #ff4242;
      }
    }
  }
  .main-select {
    display: flex;
    justify-content: flex-start;
    color: #343434;
    font-size: 30rpx;
    height: 100rpx;
    line-height: 100rpx;
    text {
      display: inline-block;
      width: 25%;
      text-align: center;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-align: center;
    }
    .select {
      color: #ff4242;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 6rpx;
        background: #ff4242;
        position: absolute;
        left: 0;
        bottom: -8rpx;
      }
    }
  }
  .main-list {
    overflow-y: auto;
    color: #343434;
    font-size: 30rpx;
    width: 100%;
    height: 75%;
    overflow: auto;
    .list-box {
      display: flex;
      flex-direction: column;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 2rpx solid #dedede;
    }
    .list-box:last-child {
      border-bottom: none;
    }
    .active {
      color: #ff4242;
    }
  }
}
</style>
